/*
 * @Author: luocaisen 
 * @Date: 2024-09-17 23:11:14 
 * @Last Modified by: luocaisen
 * @Last Modified time: 2024-12-08 22:30:24
 * @description 顶部栏
 */
<template>
	<view
		class="topNav-container"
		:style="
			'padding-top: ' +
			top +
			'px;background-color:' +
			backgroundColor +
			';color:' +
			color
		"
		:class="[{ underline: isUnderline }, { transparent: isTransparent }]"
	>
		<view v-if="isBackTo" class="left" @click="backToEvent">
			<view class="icon-back"></view>
		</view>
		<view class="title">{{ title }}</view>
		<view v-if="isBackTo" class="right"></view>
	</view>
</template>
  
<script>
import { mapState } from "vuex";
export default {
	name: "TopNav",
	props: {
		// 标题
		title: {
			type: String,
			default: "",
		},
		// 是否有返回按钮
		isBackTo: {
			type: Boolean,
			default: true,
		},
		// 是否自定义返回按钮回调
		isCustomBackEvent: {
			type: Boolean,
			default: false,
		},
		// 是否有下划线
		isUnderline: {
			type: Boolean,
			default: false,
		},
		// 背景是否透明
		isTransparent: {
			type: Boolean,
			default: true,
		},
		backgroundColor: {
			type: String,
			default: "#ffffff",
		},
		color: {
			type: String,
			default: "#000000",
		},
	},
	data() {
		return {};
	},
	mounted() {},
	methods: {
		// 返回按钮事件
		backToEvent() {
			if (this.isCustomBackEvent) {
				// 调用自定义回调
				this.$emit("backCallback");
				return;
			}
			uni.navigateBack({ delta: 1 }); // 回退上一页
		},
	},
	computed: {
		...mapState({
			top: (state) => state.systemInfo.top,
		}),
	},
};
</script>
  
<style lang="scss" scoped>
.topNav-container {
	padding-top: var(--paddingTop);
	height: 88rpx;
	line-height: 88rpx;
	display: flex;
	width: 100%;
	position: relative;
	border-bottom: 2rpx solid transparent;
	transition: background-color 0.4s ease-in-out;

	.left,
	.right {
		width: 200rpx;
		box-sizing: border-box;
	}

	.left {
		padding-left: 32rpx;
		display: flex;
		align-items: center;

		.icon-back {
			width: 48rpx;
			height: 48rpx;
			display: block;
			background-image: url("@/static/images/common/icon_back.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}

	.title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 500;
		flex: 1;
		font-size: 34rpx;
		// color: #000000;
		text-align: center;
	}
}

.transparent {
	background-color: transparent;
}

.underline {
	border-bottom-color: rgba(0, 0, 0, 0.1);
}
</style>